<script setup>
import { ref, reactive } from 'vue';

const title = ref('搜索');
const keyword = ref('');
const showResults = ref(false);

const history = reactive([
  '搜索历史记录1',
  '搜索历史记录2',
  '搜索历史记录3'
]);

const onClickLeft = () => {
  history.back();
};

const onKeywordChange = (value) => {
  showResults.value = true;
};

const onDeleteHistory = (index) => {
  history.splice(index, 1);
};

const onSelectHistory = (item) => {
  keyword.value = item;
  showResults.value = true;
};
</script>

<template>
  <div>
    <HCnavbar :title="title" :leftArrow=true />
    <van-cell-group style="margin-top: 5px;">
      <div style="display:flex ;justify-content: center;align-items: center;">
        <van-field
        style="width: 84%;height:30px;border-radius: 20px;border: 1px solid #07c160;margin-right: 10px;"
        v-model="keyword"
        placeholder="请输入搜索关键词"
        @change="onKeywordChange"
      />
      <span style="color: #07c160;" @click="search">搜索</span>
      </div>
      <van-cell
        v-for="(item, index) in history"
        :key="index"
        :title="item"
        right-icon="delete"
        @click-right="onDeleteHistory(index)"
        @click="onSelectHistory(item)"
      />
    </van-cell-group>
    <div v-if="showResults" class="search-results">
      <!-- 添加搜索结果的内容 -->
    </div>
  </div>
</template>

<style scoped lang="scss">
  .search-box {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-results {
  
}
::v-deep{

  .van-field__control{
    margin:-8px !important;
  }
} 
</style>